﻿<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Particles background using Particles.js</title>

  <style>
    canvas {
      display: block;
    }

    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #00356B;
    }

    .text {
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translate(50%, -50%);
      color: #FFB90F;
      max-width: 90%;
      padding: 2em 3em;
      background: rgba(0, 0, 0, 0.4);
      text-shadow: 0px 0px 2px #131415;
      font-family: "Open Sans", sans-serif;
    }

    h1 {
      font-size: 2.25em;
      font-weight: 700;
      letter-spacing: -1px;
    }

    a,
    a:visited {
      color: #e34234;
      transition: 0.25s;
    }

    a:hover,
    a:focus {
      color: #ba160c;
    }
  </style>



</head>

<body translate="no" style="margin: 0px;">
  <div id="particles-js"></div>

  <div class="text">
    <h3>建议全屏阅读,欢迎在评论区指正错误！</h3>
  </div>

  <script src='particles.js'></script>
  <script id="rendered-js">
    particlesJS("particles-js", {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 700
          }
        },

        "color": {
          "value": "#ffffff"
        },

        "shape": {
          "type": "polygon",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },

          "polygon": {
            "nb_sides": 10
          }
        },

        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 0.1,
            "opacity_min": 0.1,
            "sync": false
          }
        },

        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 10,
            "size_min": 0.1,
            "sync": false
          }
        },

        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },

        "move": {
          "enable": true,
          "speed": 2,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },

      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },

          "onclick": {
            "enable": true,
            "mode": "push"
          },

          "resize": true
        },

        "modes": {
          "grab": {
            "distance": 140,
            "line_linked": {
              "opacity": 1
            }
          },

          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },

          "repulse": {
            "distance": 200,
            "duration": 0.4
          },

          "push": {
            "particles_nb": 4
          },

          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    });
</script>

</body>

</html>